
@import './dark-variable.scss';
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url(../assets/imgs/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: rgba(0,0,0,.3);
}
a {
  text-decoration: none; /* 去掉下划线 */
  color: gray; /* 继承父元素的颜色 */
}
a:hover {
  text-decoration: none; /* 鼠标悬停时去掉下划线 */
}
a:active {
  color: inherit; /* 激活状态继承父元素的颜色 */
}
/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #0f0d0d;
}

::-webkit-scrollbar-thumb {
  background: #0f0d0d;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0f0d0d;
}

/* 如果需要滚动条的边缘也使用圆角，可以加上下面的样式 */
::-webkit-scrollbar-thumb:vertical {
  border-radius: 6px; /* 纵向滑块 */
}

::-webkit-scrollbar-thumb:horizontal {
  border-radius: 6px; /* 横向滑块 */
}

/* Firefox 滚动条样式 */
* {
  scrollbar-width: thin; /* 设置滚动条为细 */
  scrollbar-color: #0e0e0e #0f0d0d; /* 滚动条颜色和轨道颜色 */
  :hover {
    scrollbar-color: #2b2929 #0f0d0d; /* 滚动条颜色和轨道颜色 */
  }
}
#app {
  position:absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
#header,#main-container {
  padding-left: 5.5rem;
  padding-right: 5.5rem;
}
#header {
  padding-top: 1.5rem;
}
#main-container {
  padding-bottom: 2em;
}
#navigator {
    border-top: solid 1px var(--el-menu-border-color);
    border-bottom: solid 1px var(--el-menu-border-color);
}
.title1 {
  font-size: 17px;
  // margin-top: 20px;
  margin-bottom: 20px;
  color: #e3e3e8;
}
.title2 {
  font-size: 16px;
  margin-bottom: 20px;
  color: #e3e3e8;
}
.title2-padding {
  padding-top: 10px;
  padding-left: 10px;
}
#logo {
  font-size: 24px;
  color: rgb(77, 238,234)
}
#logo h1 {
  font-size: 1.25em;
  margin-block-start: 0.3em;
  margin-block-end: 0;
}

.card {
  border-radius: 5px;
  margin-block-end: 1.5rem;
  box-shadow: inset 0 -1px 12px 3px #ffffff0d;
  background-color: rgba(14,14,18,.8);
  background-position: center top;
  background-repeat: no-repeat;
  content: "";
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  width: 100%;
}

.pry-btn {
  background-color: $green !important;
  color: #000 !important;
}
.cancel-btn  {
  background-color: $yellow2 !important;
  color: #000 !important;
}
.el-radio__input.is-checked+.el-radio__label {
  color: unset !important;
}
.radius-4 {
  border-radius: 4px;
}
.avatar{
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
}
.d-flex {
  display: flex;
}
.online {
  background-color: $green;
}
.offline {
  background-color: $red;
}
.circle {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 1px;
}
.m-margin {
  margin-top: 1em;
  margin-bottom: 1em;
}
.status-div {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 2em;
  width: 95%;
}
.m-margin-1 {
  margin-top: 1em;
}
.card-padding {
  padding: 10px 10px 10px 10px;
}
.tel-tree .el-tree-node {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
}
.el-table .warning-row {
  background: #d6573c;
}
.custom-scrollbar {
  overflow-y: auto;
}
.btn-flex {
  padding: 10px 0 20px 0;
  justify-content: flex-end;
  margin-left: 40px;
}